<template>
  <div id="app">
    <div style="overflow: hidden; height: 45px; line-height: 45px">
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        style="float: left; line-height: 45px"
      >
      <el-breadcrumb-item :to="{ path: '/admin/index' }">首页</el-breadcrumb-item>    
        <!-- <el-breadcrumb-item :to="{ path: '/admin/dashboard' }"
          >控制台</el-breadcrumb-item
        > -->
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-button
        type="primary"
        style="float: right; margin-right: 10px; margin-bottom: 5px"
        @click="dialogVisible1 = true"
        >添加</el-button
      >
    </div>
    <el-table :data="list" style="width: 100%" :row-class-name="tableRowClassName">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" class="demo-table-expand">
            <el-form-item label="商品ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="商品价格">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="商品图片">
              <span>
                <img :src="props.row.pic" alt="" />
              </span>
            </el-form-item>
            <el-form-item label="商品介绍">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
            <el-form-item label="商品销量">
              <span>{{ props.row.buyCount }}</span>
            </el-form-item>
            <el-form-item label="商品买家">
              <span>
                <img :src="props.row.avatar" alt="" class="avatar"/>
              </span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品 ID" prop="id"></el-table-column>
      <el-table-column label="商品名称" prop="name"> </el-table-column>
      <el-table-column label="描述" prop="desc"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
          icon="el-icon-edit"
          circle
          style="background-color: #9796f0" 
          @click="updateData(scope.$index, scope.row)"
        ></el-button>
        <el-button
          icon="el-icon-delete"
          circle
          style="background-color: #fbc7d4"
          @click="delDate(scope.$index, scope.row)"
        ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改信息 弹出框 -->
    <el-dialog
      title="修改信息"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品ID">
          <el-input v-model="form.id" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-input v-model="form.pic"></el-input>
        </el-form-item>
        <el-form-item label="商品介绍">
          <el-input v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item label="商品销量">
          <el-input v-model="form.buyCount"></el-input>
        </el-form-item>
        <el-form-item label="商品买家">
          <el-input v-model="form.avatar"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cacelUpd">取 消</el-button>
        <el-button type="primary" @click="submitUpdate"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 添加信息 弹出框 -->
    <el-dialog
      title="添加信息"
      :visible.sync="dialogVisible1"
      width="30%"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品ID">
          <el-input v-model="id"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="price"></el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-input v-model="pic"></el-input>
        </el-form-item>
        <el-form-item label="商品介绍">
          <el-input v-model="desc"></el-input>
        </el-form-item>
        <el-form-item label="商品销量">
          <el-input v-model="buyCount"></el-input>
        </el-form-item>
        <el-form-item label="商品买家">
          <el-input v-model="avatar"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="addMessage">添 加</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import url from '../../config/url'
export default {
  data() {
    return {
      list: [],
      dialogVisible: false,
      dialogVisible1: false,
      id:'',
      name: '',
      price:'',
      pic:'',
      desc: '',
      buyCount:'',
      avatar:'',
      form: {
            id:'',
            name: '',
            price:'',
            pic:'',
            desc: '',
            buyCount:'',
            avatar:''
      },
      isDisabled:true,
      // 复制数组
      newList:[]
    }
  },
  created() {
    this.$http.get(url.goods).then((res) => {
      // console.log(res.data);
      this.list = res.data
    })
  },
  methods: {
    // 行状态 添加样式
    tableRowClassName({ row, rowIndex }) {
      // console.log(rowIndex)
      if (rowIndex % 2 !== 0) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    },
    // 添加信息
    addMessage(){
      const {id,name,price,pic,desc,buyCount,avatar} = this
      let data = {id,name,price,pic,desc,buyCount,avatar}
      this.$http.post(url.goods,data).then((res) => {
        console.log(res)
        if(res.data){
          this.$tip('添加成功')
          this.dialogVisible1 = false
          this.list.push(data)
        }else{
          this.$tip('添加失败','error')
        }
      })
    },
    // 取消编辑
    cacelUpd(){
      this.dialogVisible = false
      this.list = this.newList
    },
    // 点击编辑
    updateData(index,row) {
      this.dialogVisible = true
      this.form = row
      this.newList = JSON.parse(JSON.stringify(this.list))
    },
    // 删除 数据
    delDate(index,row) {
      this.$http
        .delete(url.goods + '/' + row.id)
        .then((res) => {
          console.log(res)
            if (res.data) {
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.list.splice(index, 1)
                    this.$message({
                        type: 'success',
                        message: '删除成功!',
                    });
                    // 删除后刷新页面
                    window.location.reload();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        })
    },
    // 修改数据
    submitUpdate(){
      this.$http.put(url.goods + '/' + this.form.id,this.form).then((res) => {
        // console.log(res)
        if(res.data){
          this.$tip('修改成功')
          this.dialogVisible = false
        }else{
          this.$tip('修改失败','error')
        }
      })
    }
  }
}
</script>

<style scoped>
.warning-row {
  background: #f491b4 !important;
}
.success-row {
  background: skyblue !important;
}
.demo-table-expand {
  font-size: 0;
  margin-left: 150px;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  /* width: 25%; */
}
img {
  width: 100px;
}
.avatar{
  border-radius: 50%;
  width: 50px;
}
/* .el-table tr{
  height: 20px;
} */
</style>
